<template>
	<view>
		<!-- 搜索框 -->
		<view class="search-box">
			<input v-model="keyword" @input="onInput" placeholder="请输入关键词" />
			<button @click="onSearch">搜索</button>
		</view>

		<!-- 推荐搜索关键词 -->
		<view class="recommend-keywords" v-if="isSearch==false">
			<view v-for="item in recommendKeywords" :key="item.id" class="keyword-item" @click="onKeywordClick(item)">
				{{ item.keyword }}
			</view>
		</view>

		<view class="resultList" v-else>
			<view class="list_content" v-if="lists.length>0">
				<view class="box" v-for="(item,index) in lists" @click="detail(item.id)">
					<view class="box_left">
						<img :src="item.image" class="box_image">
					</view>
					<view class="box_right">
						<view class="right_title">{{item.name}}</view>
						<view class="right_price">¥{{item.price}}</view>
					</view>
				</view>
			</view>
			<view v-else>
				抱歉没有找到商品额
			</view>
		</view>


	</view>
</template>

<script>
	export default {

		data() {
			return {
				isSearch: false,
				lists: [],
				keyword: '', // 搜索关键词
				recommendKeywords: [ // 推荐搜索关键词列表
					{
						id: 1,
						keyword: '手机'
					},
					{
						id: 2,
						keyword: '电视'
					},
					{
						id: 3,
						keyword: '笔记本电脑'
					},
					// 可以根据需要添加更多的关键词
				],
			};
		},
		methods: {
			onInput(event) {
				// 处理输入框输入事件，你可以在这里实现自动补全等功能
			},
			async onSearch() {
				// 处理搜索按钮点击事件，跳转到搜索结果页面，并传递搜索关键词
				var params = {};
				params.name = this.keyword
				var result = await this.$http.getSearchResult(params);
				if (result.code == 1) {
					console.log(result.data.result)
					if (result.data.result != null) {
						this.lists = result.data.result
					} else {
						this.lists = [];
					}
					this.isSearch = true
				}
				if (params.name == "") {
					this.isSearch = false
				}
			},
			detail(id) {
				uni.navigateTo({
					url: "/pages/product/detail?id=" + id
				})
			},
			onKeywordClick(keywordItem) {
				// 处理推荐关键词点击事件，将点击的关键词填充到搜索框
				this.keyword = keywordItem.keyword;
			},
		},
	};
</script>

<style>
	/* 样式可以根据需求进行调整 */
	.search-box {
		display: flex;
		align-items: center;
		padding: 10px;
		background-color: #f5f5f5;
	}

	.search-box input {
		flex: 1;
		border: 1px solid #ccc;
		padding: 5px 10px;
		border-radius: 5px;
	}

	.search-box button {
		background-color: #ff6600;
		color: #fff;
		border: none;
		border-radius: 5px;
		padding: 5px 10px;
		margin-left: 10px;
	}

	.recommend-keywords {
		padding: 10px;
	}

	.keyword-item {
		display: inline-block;
		padding: 5px 10px;
		background-color: #eee;
		margin-right: 10px;
		border-radius: 5px;
		cursor: pointer;
	}

	/* 开始 */
	.list_content {

		padding: 0px;
		margin: 0px;
		/* border: 1px solid red; */
		/* height: 100vh; */

	}

	.box {
		border: 5px solid white;
		height: 120px;
		margin-top: 10px;
		padding: 10px 10px;
		background-color: white;
		width: 80%;
		/* border: 1px solid red; */

	}
	.box_left{
		/* border: 1px solid red; */
		float: left;
	}
	.box_left .box_image{
		width: 120px;
		height: 120px;
		border-radius: 0.5em;
	}
	.box_right{
		/* border: 1px solid red; */
		width: 150px;
		float: left;
		margin-left: 10px;
	}
	.right_title{
		/* border: 1px solid red; */
		font-size: 12px;
	}
	.right_price{
		margin-top: 10px;
		color: orangered;
		/* border: 1px solid red; */
	}
</style>